<template>
    <div id="app">
        <el-row>
            <el-col :span="5"><el-input v-model="title"   size="mini" placeholder="请输新闻标题"></el-input></el-col>
            <el-col :span="5"><el-input v-model="clickN"   size="mini" placeholder="请输入点击量"></el-input></el-col>
            <el-col :span="4"><el-input v-model="typeId"   size="mini" placeholder="请输入类型"></el-input></el-col>
            <el-col :span="5"><el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
            <el-col :span="5"><el-button type="primary" size="mini" @click="addFormVisible=true" icon="el-icon-circle-plus" v-has="'news:add'">添加</el-button></el-col>
        </el-row>
        <el-row>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="click_num"
                            label="点击量"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="add_time"
                            label="添加时间">
                    </el-table-column>
                    <el-table-column
                            prop="type_id"
                            label="类型">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="toEdit(scope.$index, scope.row)"  v-has="'news:update'">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)"  v-has="'news:delete'">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <el-row>
            <!--添加弹出框-->
            <el-dialog title="添加" :visible.sync="addFormVisible">
                <el-form :model="form">
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="form.TITLE" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="点击量" :label-width="formLabelWidth">
                    <el-input v-model="form.CLICKNUM" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-input v-model="form.TYPE_ID" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add()">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
        <el-row>
            <!--更新弹出框-->
            <el-dialog title="更新" :visible.sync="updateFormVisible">
                <el-form :model="form">
                    <el-form-item label="标题" :label-width="formLabelWidth">
                        <el-input v-model="form.TITLE" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="点击量" :label-width="formLabelWidth">
                        <el-input v-model="form.CLICKNUM" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <el-input v-model="form.TYPE_ID" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update()">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>
    <script>
       export default {
             name:"app",
              data() {//数据
                return{
                    tableData:[],
                    currentPage:1,
                    pageSize:5,
                    total:20,
                    title:null,
                    clickN:null,
                    typeId:null,
                    addFormVisible:false,//添加对话框是否显示
                    updateFormVisible:false,//更新对话框是否显示
                    form: {},//添加或者更新form
                    formLabelWidth:"120px"
                }
             },
             created:function () {
                this.loadData();
             },
             methods:{//方法
                 //加载数据的方法
                 loadData:function () {
                     let _this =this;
                     //初始化数据
                      this.$http.get('/news/page', {
                         params: {
                             pageNo:this.currentPage,
                             pageSize:this.pageSize,
                             title:this.title,
                             clickNum:this.clickN,
                             typeId:this.typeId
                         }
                     })
                         .then(function (response) {
                             // handle success  处理成功，回调的方法
                             //console.log(response);
                             //赋值分页列表
                             _this.tableData = response.data.page;
                             //删除最后一页为空时，调到上一页
                             //alert(_this.tableData.length);
                             if(_this.tableData.length==0&&_this.currentPage!=1){
                                 _this.currentPage=_this.currentPage-1;
                                 _this.loadData();
                             }
                             //赋值总条数
                             _this.total = response.data.total;
                         })
                         .catch(function (error) {
                             // handle error 处理异常
                             //console.log(error);
                         })
                         .then(function () {
                             // always executed  总是执行  相当于finally
                         });
                 },
                 //每页数量发生变化时
                 handleSizeChange:function (v) {
                     this.pageSize=v;
                    this.loadData();
                 },
                 //当前页数放生变化是
                 handleCurrentChange:function (v) {
                    this.currentPage=v;
                    this.loadData();
                 },
                 // 搜索方法
                 search:function () {
                     this.currentPage=1;
                     this.loadData();
                 },
                 //跳转更新
                 toEdit:function (index,row) {
                       this.form=row;
                       this.updateFormVisible=true;
                 },
                 //删除
                 handleDelete:function (index,row) {
                     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                         confirmButtonText: '确定',
                         cancelButtonText: '取消',
                         type: 'warning'
                     }).then(() => {
                         this.$http.post('/news/delete?id='+row.ID).then(function (response) {
                             console.log(response);
                             if(response.status == 200){
                                 if(response.data>0) {
                                     //提示成功
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }
                             }
                         }).catch(function (error) {
                             console.log(error);
                             _this.$message.error("你错了。。。");
                         });

                     }).catch(() => {
                         this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });
                     });
                 },
                 //添加
                 add:function(){
                         _this = this;
                         this.$http.post('/news/add',this.form).then(function (response) {
                             console.log(response);
                             if(response.status == 200){
                                 //提示成功
                                 _this.$message({
                                     message: '恭喜你，添加成功',
                                     type: 'success'
                                 });
                                 //_this.$message.success("恭喜你，添加成功");
                                 //关闭弹出框
                                 _this.addFormVisible=false;
                                 //重新加载数据
                                 _this.loadData();
                                 //清空form
                                 _this.form={};
                             }
                         }).catch(function (error) {
                             console.log(error);
                             _this.$message.error("你错了。。。");
                         });
                 },
                 //更新
                 update:function(){
                     _this = this;
                     //JSON.stringify JSON 转 String
                     alert(JSON.stringify(this.form));
                     this.$http.post('/news/update',this.form).then(function (response) {
                         console.log(response);
                         if(response.status == 200){
                             //提示成功
                             _this.$message({
                                 message: '恭喜你，操作成功',
                                 type: 'success'
                             });
                             //_this.$message.success("恭喜你，添加成功");
                             //关闭弹出框
                             _this.updateFormVisible=false;
                             //重新加载数据
                             _this.loadData();
                         }
                     }).catch(function (error) {
                         console.log(error);
                         _this.$message.error("你错了。。。");
                     });
                 }
                 
             }
         };
    </script>
 